<!-- 订单列表 -->
<template>
	<view class="list">
		<view class="list-item" @click="handleNavToDetail()">
			<view class="header">
				<text class="home-icon iconfont">&#xe602;</text>
				<text class="name">鱼米之乡农资站</text>
				<text class="right-icon iconfont">&#xe601;</text>
				<text class="status">待支付</text>
			</view>
			<view class="body">
				<image class="goods-pic" src="/pagesC-order/static/images/will-delete/goods1.png" mode="aspectFill">
				</image>
				<view class="center">
					<text class="goods-name">舒绝红火蚁杀蚁饵剂专用药正品一窝端红蚂舒绝红火蚁杀蚁饵剂专用药正品一窝端红蚂</text>
					<text class="send-tip">08月21日 09:32前发货</text>
					<view class="tag-box">
						<view class="tag">七天无理由退换</view>
						<view class="tag">15天价保</view>
					</view>
				</view>
				<view class="right">
					<text class="price">¥9.9</text>
					<text class="count">共1件</text>
				</view>
			</view>
			<view class="footer">
				<button class="more-btn iconfont" @click.stop="toggle01 = !toggle01">&#xe61e;</button>
				<view class="btn-group">
					<button class="btn" @click.stop="handleChangeAddress()">修改地址</button>
					<button class="btn" @click.stop="handleCancelOrder()">取消订单</button>
					<button class="btn active" @click.stop="">去支付</button>
					<view class="other-btn" :class="{'show': toggle01}">
						<button class="btn">更多测试</button>
					</view>
				</view>
			</view>
		</view>

		<view class="list-item" @click="handleNavToDetail()">
			<view class="header">
				<text class="home-icon iconfont">&#xe602;</text>
				<text class="name">鱼米之乡农资站</text>
				<text class="right-icon iconfont">&#xe601;</text>
				<text class="status">待收货</text>
			</view>
			<view class="body">
				<image class="goods-pic" src="/pagesC-order/static/images/will-delete/goods2.png" mode="aspectFill">
				</image>
				<view class="center">
					<text class="goods-name">舒绝瓶装红火蚁药杀蚁专用饵剂连环灭杀室外一窝端</text>
					<text class="send-tip">预计08月21日到</text>
					<view class="tag-box">
						<view class="tag">七天无理由退换</view>
						<view class="tag">15天价保</view>
					</view>
				</view>
				<view class="right">
					<text class="price">¥9.9</text>
					<text class="count">共1件</text>
				</view>
			</view>
			<view class="footer">
				<button class="more-btn iconfont" @click="toggle02 = !toggle02">&#xe61e;</button>
				<view class="btn-group">
					<button class="btn" @click.stop="handleCheckExpress()">查看物流</button>
					<button class="btn" @click.stop="handleRefund()">退款/售后</button>
					<button class="btn active" @click.stop="handleConfirmReceived()">确认收货</button>
					<view class="other-btn" :class="{'show': toggle02}">
						<button class="btn">更多测试</button>
					</view>
				</view>
			</view>
		</view>

		<view class="list-item" @click="handleNavToDetail()">
			<view class="header">
				<text class="home-icon iconfont">&#xe602;</text>
				<text class="name">鱼米之乡农资站</text>
				<text class="right-icon iconfont">&#xe601;</text>
				<text class="status">已取消</text>
			</view>
			<view class="body">
				<image class="goods-pic" src="/pagesC-order/static/images/will-delete/goods3.png" mode="aspectFill">
				</image>
				<view class="center">
					<text class="goods-name">神捕稳诱果实蝇喷剂果实蝇喷剂胶针蜂杀虫剂诱粘剂 </text>
					<!-- <text class="send-tip">08月21日 09:32前发货</text>
					<view class="tag-box">
						<view class="tag">七天无理由退换</view>
						<view class="tag">15天价保</view>
					</view> -->
				</view>
				<view class="right">
					<text class="price">¥9.9</text>
					<text class="count">共1件</text>
				</view>
			</view>
			<view class="footer">
				<button class="more-btn iconfont" @click.stop="toggle03 = !toggle03">&#xe61e;</button>
				<view class="btn-group">
					<button class="btn" @click.stop="handleDelete()">删除订单</button>
					<button class="btn" @click.stop="handleAddCart()">加入购物车</button>
					<button class="btn active" @click.stop="handleBuyAgain()">再次购买</button>
					<view class="other-btn" :class="{'show': toggle03}">
						<button class="btn" @click.stop="handleNavToComment()">去评价</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const toggle01 = ref(false);
	const toggle02 = ref(false);
	const toggle03 = ref(false);

	const handleNavToDetail = () => {
		uni.navigateTo({
			url: '/pagesC-order/order-detail/index'
		});
	}
	
	// 修改地址
	const handleChangeAddress = () => {
		uni.navigateTo({
			url:'/pagesC-shopping/address-manage/index?order_id=1&address_id=5'
		})
	}
	
	// 取消订单
	const handleCancelOrder = () => {
		uni.showModal({
			title:'提示',
			content:'您确定要取消该订单吗?',
			success: (res) => {
				if (!res.confirm) return;
				uni.showSuccessToast('取消成功');
			}
		})
	}
	
	// 查看物流
	const handleCheckExpress = () => {
		uni.navigateTo({
			url: '/pagesC-order/check-express/index'
		});
	}
	
	// 删除订单
	const handleDelete = () => {
		uni.showModal({
			title:'提示',
			content:'您确定要删除该订单吗?',
			success: (res) => {
				if (!res.confirm) return;
				uni.showSuccessToast('删除成功');
			}
		})
	}
	
	// 确认收货
	const handleConfirmReceived = () => {
		uni.showModal({
			title:'提示',
			content:'您确定已经收到货了吗?',
			success: (res) => {
				if (!res.confirm) return;
			}
		})
	}
	
	// 加入购物车
	const handleAddCart = () => {
		uni.showSuccessToast('添加成功');
	}
	
	// 再次购买
	const handleBuyAgain = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/goods-detail/index'
		});
	}
	
	// 退款/售后
	const handleRefund = () => {
		uni.navigateTo({
			url: '/pagesC-order/order-refund/index'
		})
	}
	
	// 发表评论
	const handleNavToComment = () => {
		uni.navigateTo({
			url: '/pagesC-order/post-comment/index'
		});
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 20rpx 25rpx;

		&-item {
			padding: 22rpx 20rpx 34rpx 24rpx;
			background-color: white;
			border-radius: 15rpx;
			transition: background-color 0.2s;

			&+.list-item {
				margin-top: 20rpx;
			}

			&:active {
				background-color: #fafafa;
			}
		}
	}

	.header {
		display: flex;
		align-items: center;

		.home-icon {
			flex-shrink: 0;
			font-size: 34rpx;
			color: #999999;
			margin-right: 8rpx;
		}

		.name {
			flex-shrink: 0;
			max-width: 500rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.right-icon {
			flex-shrink: 0;
			font-size: 22rpx;
			color: #999999;
		}

		.status {
			flex-grow: 1;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			text-align: right;
		}
	}

	.body {
		display: flex;
		margin-top: 34rpx;

		.goods-pic {
			flex-shrink: 0;
			width: 144rpx;
			height: 144rpx;
			border-radius: 10rpx;
		}

		.center {
			flex-grow: 1;
			display: block;
			padding-left: 24rpx;

			.goods-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.send-tip {
				display: block;
				font-weight: 500;
				font-size: 22rpx;
				color: #DF7A1C;
				line-height: 1.5;
				margin-top: 6rpx;
			}

			.tag-box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 15rpx;

				.tag {
					height: 30rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FE3333;
					line-height: 30rpx;
					border-radius: 8rpx;
					border: 1rpx solid #FE3A3A;
					padding: 0 6rpx;
					margin-right: 10rpx;
				}
			}
		}

		.right {
			flex-shrink: 0;
			width: 120rpx;

			.price {
				display: block;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
				text-align: right;
			}

			.count {
				display: block;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				line-height: 1.5;
				text-align: right;
			}
		}
	}

	.footer {
		display: flex;
		padding-top: 18rpx;

		.more-btn {
			flex-shrink: 0;
			width: 88rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #222222;
			text-align: left;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background-color: transparent;
		}

		.btn-group {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;

			.btn {
				width: 166rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				text-align: center;
				line-height: 58rpx;
				box-sizing: border-box;
				margin: 20rpx 0 0 20rpx;
				transition: transform 0.2s;

				&::after {
					display: block;
					border: 1px solid #E5E5E5;
					border-radius: 100px;
				}

				&:active {
					transform: scale(0.9);
				}

				&.active {
					color: #FA2C19;

					&::after {
						border-color: #FA2C19;
					}
				}
			}

			.other-btn {
				flex-shrink: 0;
				display: flex;
				justify-content: flex-end;
				flex-wrap: wrap;
				width: 100%;
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.2s;

				&.show {
					max-height: 100px;
				}
			}
		}
	}
</style>